<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Graphic图层符号绘制</title>
    <style type="text/css">
        body{
            margin: 0;
            overflow: hidden;
            background: #fff;
        }
        #map{
            position: relative;
            height: 500px;
            border:1px solid #3473b7;
        }
        #toolbar {
            position: relative;
            padding-top: 5px;
            padding-bottom: 10px;
        }
    </style>
    <link href='./css/bootstrap.min.css' rel='stylesheet' />
    <link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
    <script src = '../libs/SuperMap.Include.js'></script>
    <script type="text/javascript">
        var map,layer,graphicLayer,symbolinfo,
                host = document.location.toString().match(/file:\/\//) ? "http://localhost:8090" : 'http://' + document.location.host;
        url = host + "/iserver/services/map-china400/rest/maps/China";
        function init()
        {
            if(!document.createElement("canvas").getContext){
                alert("您的浏览器不支持Canvas，请先升级");
                return;
            }
            map = new SuperMap.Map("map",{controls:[
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.Navigation() ,
                new SuperMap.Control.LayerSwitcher()
            ]});
            layer= new SuperMap.Layer.TiledDynamicRESTLayer("World", url, null,{maxResolution:"auto"});
            layer.events.on({"layerInitialized":addLayer});
            graphicLayer = new SuperMap.Layer.Graphics("Graphic Layer");
        }

        function addLayer(){
            map.addLayers([layer,graphicLayer]);
            //显示地图范围
            map.setCenter(new SuperMap.LonLat(0, 0), 1);
        }

        //symbol相关属性 填充色、边框颜色、半径、
        var fillColors = ['rgba(255,153,0,0.4)', 'rgba(70,80,224,0.4)', 'rgba(60,150,79,0.4)', 'rgba(176,61,35,0.4)'];
        var strokeColors = ['rgba(255,204,0,0.2)', 'rgba(12,21,138,0.2)', 'rgba(20,99,32,0.2)', 'rgba(145,43,20,0.2)'];
        var radius = [3,6,9,12,15,18];
        var sybolCount = fillColors.length * radius.length * 2;
        var symbols = [];
        for(var i = 0; i <fillColors.length; i++){
            for(var j = 0; j<radius.length; j++){
                //circle  symbol
                symbols.push(new SuperMap.Style.Circle({
                            radius: radius[j],
                            fill: new SuperMap.Style.Fill({
                                color: fillColors[i]
                            }),
                            stroke: new SuperMap.Style.Stroke({
                                color: strokeColors[i]
                            })
                }));
                //star symbol
                symbols.push(new SuperMap.Style.RegularShape({
                    pointsLength: 5,
                    radius: radius[j],
                    radius1: radius[j]*0.6,
                    fill: new SuperMap.Style.Fill({
                        color: fillColors[i]
                    }),
                    stroke: new SuperMap.Style.Stroke({
                        color: strokeColors[i]
                    })
                }));
            }
        }

        var total,t1,t2;
        var e = 10000000;
        function addData()
        {
            graphicLayer.removeAllGraphics();
            var total = document.getElementById("total").value;
            t1 = new Date().getTime();

            var points = [];
            for(var i = 0; i<total; i++){
                var point= new SuperMap.Geometry.Point(2 * e * Math.random() - e, 2 * e * Math.random() - e);
                var pointVector = new SuperMap.Graphic(point);
                pointVector.style={
                    image: symbols[i % sybolCount]
                };
                points.push(pointVector)
            }
            graphicLayer.addGraphics(points);

            //消耗时间计算
            t2 = new Date().getTime();
            //console.info(total + "个总时间为：" + (t2-t1) + "ms");
            alert(total + "个总时间为：" + (t2-t1) + "ms");
        }

        //移除数据
        function removeData()
        {
            graphicLayer.removeAllGraphics();
            graphicLayer.refresh();
        }
    </script>
</head>
<body onload="init()" >
<div id="toolbar">
    <input id="total" type="text" style="width: 100px" value="1000">
    <input type="button" class="btn" style="margin-bottom: 10px" value="开始绘制" onclick="addData()">
    <input type="button" class="btn" style="margin-bottom: 10px" value="移除" onclick="removeData()">

</div>
<div id="map"></div>

</body>
</html>